<script lang="tsx">
import { computed, defineComponent } from "vue"
import props from "./props.ts"
import type { JSX } from "vue/jsx-runtime"
import styles from "./pager-container.module.less"
export default defineComponent({
	name: "ChenPager",
	props,
	emits: ["page-change"],
	setup(props, { emit }) {
		// 计算大小
		const styleObj = computed(() => {
			if (props.size === "sm") {
				return {
					lineHeight: "25px",
					height: "25px",
				}
			} else if (props.size === "lg") {
				return {
					lineHeight: "42px",
					height: "42px",
				}
			} else {
				return {
					lineHeight: "34px",
					height: "34px",
				}
			}
		})
		// 依赖计算-这是react和vue最大区
		const pagerCount = computed(() => {
			return Math.ceil(props.total / props.pageSize)
		})
		const floatCount = computed(() => {
			return Math.ceil((props.maxPage - 1) / 2)
		})
		const start = computed(() => {
			return props.currentPage - floatCount.value <= 0 ? 1 : props.currentPage - floatCount.value
		})
		const end = computed(() => {
			return props.currentPage + floatCount.value >= pagerCount.value
				? pagerCount.value
				: props.currentPage + floatCount.value
		})
		const aList = computed<JSX.Element[]>(() => {
			const al = []
			for (let i = start.value; i <= end.value; i++) {
				al.push(
					<a
						class={(props.currentPage === i ? "active" : "") + ` ${props.type}`}
						onClick={() => emit("page-change", i)}
						style={styleObj.value}
					>
						{i}
					</a>
				)
			}
			return al
		})
		return () => (
			<div class={styles["pager-container"]}>
				<a
					class={props.currentPage === 1 ? styles["disabled"] : "" + ` ${props.type}`}
					onClick={() => emit("page-change", 1)}
					style={styleObj.value}
				>
					首页
				</a>
				<a
					class={props.currentPage === 1 ? styles["disabled"] : "" + ` ${props.type}`}
					onClick={() =>
						emit("page-change", props.currentPage - 1 <= 0 ? 1 : props.currentPage - 1)
					}
					style={styleObj.value}
				>
					<Chen-Icon icon="angles-left">上一页</Chen-Icon>
				</a>
				{/* 渲染中间a元素 */}
				<div class={styles["elipse"]}>
					{start.value > 1 ? <Chen-Icon icon="ellipsis"></Chen-Icon> : ""}
				</div>
				{aList.value}
				<div class={styles["elipse"]}>
					{end.value < pagerCount.value ? <Chen-Icon icon="ellipsis"></Chen-Icon> : ""}
				</div>
				{/* 渲染中间a元素完毕 */}
				<a
					class={
						props.currentPage === pagerCount.value ? styles["disabled"] : "" + ` ${props.type}`
					}
					style={styleObj.value}
					onClick={() =>
						emit(
							"page-change",
							props.currentPage + 1 >= pagerCount.value
								? pagerCount.value
								: props.currentPage + 1
						)
					}
				>
					<Chen-Icon icon="angles-right">下一页</Chen-Icon>
				</a>
				<a
					class={
						props.currentPage === pagerCount.value ? styles["disabled"] : "" + ` ${props.type}`
					}
					style={styleObj.value}
					onClick={() => emit("page-change", pagerCount.value)}
				>
					尾页
				</a>
			</div>
		)
	},
})
</script>

<style lang="less" scoped>
@colorArr: primary, success, info, warning, danger;

each(@colorArr, {
	.@{value}{
		&:hover{
			background-color: ~"var(--chen-@{value}-3)";
		}
		&.active{
			color: white;
			background-color: ~"var(--chen-@{value})";
            border-color: ~"var(--chen-@{value})";
			cursor: default
		}
	}
});
</style>
